<template>
  <div>
    <p-table
      row-key="id"
      :columns="columns"
      bordered
      :pagination="false"
      :data-source="dataSource"
    >
      <template slot="responsibleName" slot-scope="text">
        <p-icon type="user" style="margin-right: 8px" /> {{ text || '-' }}
      </template>
    </p-table>
  </div>
</template>

<script>
import mixinTable from '@/mixins/mixin-table.js';

export default {
  mixins: [mixinTable],
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },

  computed: {
    stateApprovalOptions() {
      return this.$store.state.dictionary.dict['plan_approval_state'] || {};
    },
    stateEntrylOptions() {
      return this.$store.state.dictionary.dict['plan_entry_state'] || {};
    },
    columns() {
      return [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '销售组',
          dataIndex: 'salesGroupName',
        },
        {
          align: 'center',
          title: '销售责任人',
          dataIndex: 'responsibleName',
          scopedSlots: { customRender: 'responsibleName' },
        },
        {
          align: 'center',
          title: 'KAPM组',
          dataIndex: 'kapmGroupName',
        },
        {
          align: 'center',
          title: 'FCST录入状态',
          dataIndex: 'entryState',
          customRender: (text) => this.stateEntrylOptions[text],
        },
        {
          align: 'center',
          title: '销售部长审批状态',
          dataIndex: 'salesApprovalState',
          customRender: (text) => this.stateApprovalOptions[text],
        },
        {
          align: 'center',
          title: '销售管理审批状态',
          dataIndex: 'salesManageState',
          customRender: (text) => this.stateApprovalOptions[text],
        },
        {
          align: 'center',
          title: 'KAPM部长审批状态',
          dataIndex: 'kapmApprovalState',
          customRender: (text) => this.stateApprovalOptions[text],
        },
      ];
    },
  },
  created() {},
  methods: {},
};
</script>
